@import 'cssvars';

.title-wrapper{
  //background-color:var(--primary);
  @include variable(background-color, --primary, $primary);
  color:#fff;
  height:45%;
  text-align: left;
  padding: 16px;
  width:100%;
}

.title-wrapper .title{
  font-size:150%;
}

.title-wrapper .subtitle{
  font-size:80%;
}

.reports-btn{
  position:absolute;
  right:16px;
  bottom:16px;
  font-weight:500;
  text-transform:capitalize;
}

.chart-wrapper{
  position:relative;
  width:100%;
}

.x-axis .start-time, 
.x-axis .end-time{
    font-size: 75%;
    position: absolute;
    bottom: 0;
    font-weight:500;
    font-family:Roboto;
    opacity:0.5;
}

.x-axis .start-time{
  left:8px;
}
.x-axis .end-time{
  right:8px;
}

/*:host ::ng-deep .c3-axis-y g:nth-child(2n){
  visibility:hidden;
}*/

/* MARKER */
:host ::ng-deep .c3-chart-line .c3-circles circle._expanded_{
  //stroke:var(--primary) !important;
  @include variable(stroke, --primary, $primary, !important);
}
:host ::ng-deep .c3-chart-line circle.c3-circle{
  //fill:var(--bg2) !important;
  @include variable(fill, --bg2, $bg2, !important);
}

/* NARROW SCREENS */
.xs.widget{
  width:100%;
  max-height:320px;
}

